import { LSUtil } from 'tools-vue3'
import { reactive } from 'vue'
import { CEventEnum } from '~/enum/CEventEnum'

export enum ThemeEnum {
    'light' = 'light',
    'dark' = 'dark'
}

/**
 * 切换主题配置
 */
const themeConf = {
    max: 1,
    0: ThemeEnum.light,
    1: ThemeEnum.dark,
    getNext: (): any => {
        let _index = 0
        for (let i = 0; i < themeConf.max + 1; i++) {
            //@ts-ignore
            if (themeConf[i] === Theme.use) {
                _index = i
                break
            }
        }
        _index++
        if (_index > themeConf.max) {
            _index = 0
        }
        //@ts-ignore
        return themeConf[_index]
    },
    change: () => {
        Theme.change(themeConf.getNext())
    }
}

//注册快捷键更换主题
KeyUtil.groupKey(['Control', 'Q'], () => {
    themeConf.change()
})

//全局监听主题切换控制
CEvent.on(CEventEnum.nextChangeTheme, () => {
    themeConf.change()
})

const Theme = reactive({
    use: 'light' as ThemeEnum,
    getFun: (prop: any): any => {
        return typeof prop == 'function' ? Theme.getFun(prop()) : prop
    },
    init: async () => {
        const c_theme = LSUtil.get('theme')
        let themeStr: any = Theme.use
        if (!StrUtil.isNull(c_theme)) {
            themeStr = c_theme
        }

        let app: any = document.getElementsByTagName('body')[0]
        app.className = themeStr + '-theme'

        //使用主题
        Theme.use = themeStr
    },

    change: (name: ThemeEnum) => {
        LSUtil.set('theme', name)
        let app: any = document.getElementsByTagName('body')[0]
        app.className = name + '-theme'

        Theme.use = name
        CEvent.emit(CEventEnum.changeTheme, Theme.use)
    },
    chart: {
        /**
         * 主色
         */
        colors: {
            [ThemeEnum.light]: () => [
                '#{light.s-blue}',
                '#{light.s-green}',
                '#{light.s-orange}',
                '#{light.s-yellow}',
                '#{light.s-purple}',
                '#{light.s-red}',
                '#{light.s-gray}',
                '#{light.s-rose}'
            ],
            [ThemeEnum.dark]: () => [
                '#{dark.s-blue}',
                '#{dark.s-green}',
                '#{dark.s-orange}',
                '#{dark.s-yellow}',
                '#{dark.s-purple}',
                '#{dark.s-red}',
                '#{dark.s-gray}',
                '#{dark.s-rose}'
            ]
        },
        getColor1: () => () => Theme.chart.colors[Theme.use](),

        /**
         * 字体颜色
         */
        fontColor1Obj: {
            [ThemeEnum.light]: () => '#{light.n-text}',
            [ThemeEnum.dark]: () => '#{dark.n-text}'
        },
        getFontColor1: () => () => Theme.chart.fontColor1Obj[Theme.use]()
    }
})

export default Theme
